<template>
  <div class="orderList page">
    <scroll-view class="scroll-content scroll-header sticky" :scroll-x="true">
      <div
        v-for="(item, index) in typesData"
        :key="`types${index}`"
        class="item"
        @tap="changeSelect(item, index)"
      >
        <div class="box flex-col" :class="{ select: index === selectType }">
          <span class="text">{{ item.label }}</span>
          <span v-if="index === selectType" class="line" />
        </div>
      </div>
    </scroll-view>

    <!-- 订单列表 -->
    <OrderList
      :data.sync="orderData.data"
      :platform-telephone.sync="$orgPhone"
      @updateShow="updateShow"
    />
  </div>
</template>

<script>
import "./index.scss";
// import http from '@utils/http'
import OrderList from "./components/orderList";
import { getorderList } from "../../config/api";
export default {
  components: { OrderList },
  data() {
    return {
      typesData: [
        {
          label: "全部订单",
          value: -1,
        },
        {
          label: "待支付",
          value: 0,
        },
        // {
        //   label: "待审核",
        //   value: 1,
        // },
        {
          label: "待发货",
          value: 2,
        },
        {
          label: "已发货",
          value: 3,
        },
        {
          label: "租用中",
          value: 4,
        },
        {
          label: "待归还",
          value: 5,
        },
        {
          label: "归还中",
          value: 11,
        },
        {
          label: "待完结",
          value: 10,
        },
        {
          label: "已完成",
          value: 6,
        },
        // {
        //   label: "待评价",
        //   value: 7,
        // },
        {
          label: "已取消",
          value: 8,
        },
      ],
      selectType: 0,
      orderData: {
        data: [],
        page: 1,
        size: 10,
        finish: false,
      },
      platformTelephone: NaN,
    };
  },
  computed: {
    status() {
      return this.typesData[this.selectType].value;
    },
  },
  onShow() {
    // const status = this.$taro.getStorageSync('orderStatus')
    // if (status) {
    //   const index = this.typesData.findIndex(item => item.value === status)
    //   this.changeSelect({}, index)
    //   this.$nextTick(() => {
    //     this.$taro.removeStorageSync('orderStatus')
    //   })
    // } else {
    //   this.getOrderList()
    // }
  },
  onLoad() {
    this.getOrderLists();
  },
  mounted() {
    // const { status } = this.$query();
    // if (status) {
    //   const index = this.typesData.findIndex(
    //     (item) => item.value === Number(status)
    //   );
    //   this.changeSelect({}, index);
    // } else {
    //   this.getOrderList();
    // }
    // this.$checkLogin();
  },
  onPullDownRefresh() {
    this.resetData();
  },
  onReachBottom() {
    if (!this.orderData.finish) {
      this.orderData.page += 1;
      this.getOrderList();
    }
  },
  methods: {
    async getOrderLists() {
      uni.stopPullDownRefresh();
      if (this.orderData.finish) {
        return;
      }
      const res = await getorderList({
        pageNumber: 1,
        pageSize: 10,
        sessionId: "c22eeb72a2abdc87a2e8b2c6865d230d_61985",
      });
      console.log(res, res.data, "ressss");
      this.orderData.data = res.data.orderInfoDTOList;
      this.orderData.finish =
        res.data.orderInfoDTOList.length < this.orderData.size;
      console.log(this.orderData.data, this.orderData.finish, "ppppppppppp");
    },
    changeSelect(item, index) {
      this.selectType = index;
      this.resetData();
    },
    getOrderList() {
      uni.startPullDownRefresh();
      if (this.orderData.finish) {
        return;
      }
      const params = {
        pageNumber: this.orderData.page,
        pageSize: this.orderData.size,
        ...(this.selectType !== 0 ? { status: this.status } : {}),
      };
      this.$api.getOrderList(params).then((data) => {
        this.orderData.data.push(...data);
        this.orderData.finish = data.length < this.orderData.size;
        this.orderData.data.forEach((item, index) => {
          if (item.status === 1) {
            this.$http
              .request({
                url: "/order/queryCertify.json",
                data: {
                  orderId: item.id,
                },
              })
              .then(() => {
                this.$set(this.orderData.data, index, {
                  ...item,
                  isShow: true,
                });
              })
              .catch(() => {
                this.$set(this.orderData.data, index, {
                  ...item,
                  isShow: false,
                });
              });
          } else {
            this.$set(this.orderData.data, index, item);
          }
        });
      });
      // http.request({
      //   url: '/order/orderList.json',
      //   data: params
      // }, true).then(({ data: { orderInfoDTOList, platformTelephone } }) => {
      //   this.orderData.data.push(...orderInfoDTOList)
      //   // this.platformTelephone = platformTelephone
      //   if (orderInfoDTOList.length < this.orderData.size) {
      //     this.orderData.finish = true
      //   } else {
      //     this.orderData.finish = false
      //   }
      //   // this.goodsListData.data = goodsInfoDTOList
      // })
    },
    resetData() {
      this.orderData.page = 1;
      this.orderData.finish = false;
      this.orderData.data = [];
      this.$taro.pageScrollTo({ scrollTop: 0 });
      this.getOrderList();
    },
    updateShow(index) {
      this.$set(this.orderData.data, index, {
        ...this.orderData.data[index],
        isShow: false,
      });
      console.log(index, this.orderData.data);
    },
  },
};
</script>
